<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="mb10">
				<el-row :gutter="10" :span="24">
					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">发放中(张)</div>
									<div class="font22">{{state.couponStatisticsData.usable}}</div>
								</div>
							</section>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">已过期(张)</div>
									<div class="font22">{{state.couponStatisticsData.stale}}</div>
								</div>
							</section>
						</div>
					</el-col>

					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">已领取(张)</div>
									<div class="font22">{{state.couponStatisticsData.get}}</div>
								</div>
							</section>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">已使用(张)</div>
									<div class="font22">{{state.couponStatisticsData.used}}</div>
								</div>
							</section>
						</div>
					</el-col>

					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">使用率</div>
									<div class="font22">{{state.couponStatisticsData.useRate}}%</div>
								</div>
							</section>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="contentBox">
							<section class="personal-recommend">
								<section style="width: 48px; height: 48px; background: width">
									<el-image style="width: 48px; height: 48px" :src="yyy" />
								</section>
								<div class="personal-recommend-auto">
									<div class="font16">关联订单金额(元)</div>
									<div class="font22">{{state.couponStatisticsData.money}}</div>
								</div>
							</section>
						</div>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="类型：">
						<el-select v-model="state.param.couponBaseType" placeholder="请选择类型" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="满减券" :value="0" />
							<el-option label="折扣券" :value="1" />
						</el-select>
					</el-form-item>
					<el-form-item label="适用范围：">
						<el-select v-model="state.param.couponUseType" placeholder="请选择用范围" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="全场通用" :value="1" />
							<el-option label="商品券" :value="2" />
							<el-option label="品类券" :value="3" />
							<el-option label="分类券" :value="3" />
							<el-option label="品牌券" :value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="领取方式：">
						<el-select v-model="state.param.couponType" placeholder="请选择用范围" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="手动领取" :value="1" />
							<el-option label="新人券" :value="2" />
							<el-option label="赠送券" :value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="名称搜索：">
						<el-input v-model="state.param.couponName" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="display: flex; flex-direction: column; flex: 1; height: inherit">
					<el-row class="mb10">
						<el-col class="contentMenuBox">
							<el-button class="mr15" type="primary" @click="addVoucher('add')">
								<el-icon>
									<ele-Plus />
								</el-icon>
								新 增
							</el-button>
						</el-col>
					</el-row>
					<el-table :data="state.tableData">
						<el-table-column label="ID" prop="skuId" width="90" />
						<el-table-column prop="couponName" label="优惠券名称" show-overflow-tooltip></el-table-column>
						<el-table-column prop="couponBaseTypeName" label="优惠券类型" show-overflow-tooltip></el-table-column>
						<el-table-column prop="couponUseTypeName" label="适用范围" show-overflow-tooltip></el-table-column>
						<el-table-column label="面值" show-overflow-tooltip>
							<template #default="scope">
								<span>￥{{ scope.row.couponValue }}</span>
							</template>
						</el-table-column>
						<el-table-column label="发放数量">
							<template #default="scope">
								<span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponTotal }}</span>
							</template>
						</el-table-column>
						<el-table-column label="已领取">
							<template #default="scope">
								<span>{{ scope.row.couponReceiveTotal }}</span>
							</template>
						</el-table-column>
						<el-table-column label="剩余数量">
							<template #default="scope">
								<span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponLastTotal }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="id" label="使用率" show-overflow-tooltip></el-table-column>
						<el-table-column prop="couponTypeName" label="领取方式" show-overflow-tooltip></el-table-column>
						<el-table-column label="创建时间">
							<template #default="scope">
								<span>{{ formatDate(new Date(scope.row.createdTime), 'YYYY-mm-dd') }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<el-switch @change="changeStatusFun(scope.row)" v-model="scope.row.couponStatus" :active-value="1" :inactive-value="0" />
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<span class="pointer font16" style="color: var(--el-color-primary)" @click="addVoucher('look', scope.row.skuId)"> 详情 </span>
								<span style="color: var(--el-color-primary)">&nbsp;|&nbsp;</span>
								<el-dropdown>
									<span style="color: var(--el-color-primary)" class="pointer font16"> 操作 </span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="addVoucher('edit', scope.row.skuId)">复制</el-dropdown-item>
											<el-dropdown-item @click="claimRecord(scope.row)">领取记录</el-dropdown-item>
											<el-dropdown-item @click="delFun(scope.row.skuId)">删除</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination
								@size-change="onHandleSizeChange"
								@current-change="onHandleCurrentChange"
								class="mt15"
								:pager-count="5"
								:page-sizes="[10, 20, 30]"
								v-model:current-page="state.param.pageNum"
								background
								v-model:page-size="state.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="state.total"
							>
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<claimRecordDialog ref="claimRecordDialogRef"></claimRecordDialog>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted,defineAsyncComponent,ref} from 'vue';
import { useRouter } from 'vue-router';
import type { saleOrderListData } from "/@/types/marketing";
import { couponStatistics, couponList, couponStatus, couponDelete } from '/@/api/marketing';
import { formatDate } from '/@/utils/formatTime';
import { ElMessageBox, ElMessage } from 'element-plus';
const claimRecordDialog = defineAsyncComponent(() => import('/@/views/marketing/voucherManage/list/components/claimRecordDialog.vue'));
import yyy from '/@/assets/images/yyy.png?url';
// 引入组件
const claimRecordDialogRef = ref();

const router = useRouter();
// 定义变量内容
const state = reactive({
	couponStatisticsData:{
		usable:0,
		stale:0,
		get:0,
		used:0,
		useRate:0,
		money:0,
	},
	param: {
		couponBaseType: null,
		couponUseType: null,
		couponType: null,
		couponName: "",
		pageNum: 1,
		pageSize: 10,  //这样就可以了， 但是这个不是自动切换得嘛 上面绑定了值
	},
	loading: false,
	total: 0,
	tableData: [] as Array<saleOrderListData>
});

onMounted(() => {
	// 获取优惠券统计
	getCouponStatistics();
	// 获取优惠券列表
	getCouponList();
})

// 获取优惠券统计
const getCouponStatistics = async () => {
	const { results } = await couponStatistics();
	state.couponStatisticsData = results
}

// 获取订单列表
const getCouponList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	const { results } = await couponList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
}

// 搜索
const search = () => {
	state.param.pageNum = 1;
	getCouponList()
}


// 订单详情
const changeStatusFun = async(obj: any) => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		skuId: obj.skuId,
		couponStatus: obj.couponStatus
	}
	const { results } = await couponStatus(params);
	console.log(results);
};


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getCouponList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getCouponList();
};


// 领取记录弹框
const claimRecord = (row:any) => {
	claimRecordDialogRef.value.openDialog(row)
};

// 删除代金券
const delFun = (id:number) => {
	ElMessageBox.confirm(`此操作将永久删除该代金券，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		let res = await couponDelete(id);
		ElMessage.success('删除成功');
		getCouponList();
	}).catch(() => {
		ElMessage.info('已取消');
	});
};

// 商品新增或者编辑
const addVoucher = (value: string,id?: number) => {
	router.push({
		path: '/marketing/voucherManage/list/add',
		query: { status: value, id: id},
	});
}
</script>
<style scoped lang="scss">
.contentBox {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--el-color-info-light-9);
	border-radius: 3px;
	padding-left: 10px;
	overflow: hidden;
	cursor: pointer;
	color: var(--el-text-color-regular);
	.personal-recommend {
		width: 100%;
		display: flex;
		align-items: center;
		.personal-recommend-auto {
			display: flex;
			width: 100%;
			flex-direction: column;
			align-items: start;
			padding: 10px 0;
			div {
				padding-left: 20px;
				text-align: left;
				width: 100%;
			}
		}
	}
}

:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table {
		flex: 1;
		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
